<template>
  <div style=" padding-bottom:150px;">
    <van-nav-bar
      title="新增"
      left-text=""
      right-text="清理缓存"
      @click-right="clearCahce"
    />
    <van-notice-bar
  left-icon="volume-o"
  text="表单内容存储到提交完成，刷新页面不会丢失"
/>
    <van-form @submit="onSubmit" rel="form">
      <van-field
        v-model="title"
        name="title"
        label="标题"
        placeholder="请输入标题"
        @blur="saveCache"
        :rules="[{ required: true, message: '请输入标题' }]"
      />
      <van-field name="classname" label="年级">
        <template #input>
          <van-radio-group v-model="classname" direction="horizontal" @change="saveCache">
            <van-radio :name="item" v-for="(item, index) in classlist">{{item}}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="classnames"
        name="classnames"
        label="班级"
        placeholder="请输入班级"
        @blur="saveCache"
        :rules="[{ required: true, message: '请输入班级' }]"
      />
      <van-field
        v-model="subject"
        name="subject"
        label="学科"
        placeholder="请输入学科"
        @blur="saveCache"
        :rules="[{ required: true, message: '请输入学科' }]"
      />
      <van-field
        v-model="teacher"
        name="teacher"
        label="教师/主备人"
        placeholder="请输入教师/主备人"
        @blur="saveCache"
        :rules="[{ required: true, message: '请输入教师/主备人' }]"
      />
      <van-field
        v-model="content"
        rows="8"
        name="content"
        autosize
        label="过程要点记录"
        type="textarea"
        placeholder="过程要点记录"
        @blur="saveCache"
        :rules="[{ required: true, message: '请输入过程要点记录' }]"
      />
      <div class="van-cell van-field">听课/听教研评价:</div>
      <div class="van-hairline--bottom"></div>
      <div class="van-cell van-field">不足或缺点:</div>

      <van-field
      v-for="(item, index) in content1"
        v-model="item.value1"
        center
        clearable
        label-width="25"
        :label="(index+1) + '、'"
        @blur="saveCache"
        placeholder="请输入不足或缺点"
        :rules="[{ required: true, message: '请输入不足或缺点' }]"
      >
        <template #button v-if="index == 0">
          <van-button size="small" native-type="button" type="primary" @click="addText(1)">+</van-button>
        </template>
        <template #button v-else>
          <van-button v-show="false" size="small" native-type="button" type="primary" @click="reomveText(index,1)">-</van-button>
        </template>
      </van-field>
      <div class="van-cell van-field">优评:</div>

      <van-field
      v-for="(item, index) in content2"
        v-model="item.value2"
        center
        clearable
        label-width="25"
        :label="(index+1) + '、'"
        @blur="saveCache"
        placeholder="请输入优评"
        :rules="[{ required: true, message: '请输入优评' }]"
      >
        <template #button v-if="index == 0">
          <van-button size="small" native-type="button" type="primary" @click="addText(2)">+</van-button>
        </template>
        <template #button v-else>
          <van-button size="small" native-type="button" type="primary" @click="reomveText(index,2)">-</van-button>
        </template>
      </van-field>
      
      <van-field name="type" label="类型" >
        <template #input>
          <van-radio-group v-model="type" direction="horizontal" @change="saveCache">
            <van-radio :name="item.id" v-for="(item, index) in types">{{item.name}}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="depart" label="部门">
        <template #input>
          <van-radio-group v-model="depart" direction="horizontal" @change="saveCache">
            <van-radio :name="item.departid" v-for="(item, index) in departs">{{item.departname}}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-notice-bar
  left-icon="volume-o"
  text="图片一次选择一个，网络环境不好，会造成上传失败，请保持网络畅通"
/>
      <div class="van-cell van-field">
        <van-uploader upload-icon="add-o" upload-text="图片和附件" :after-read="afterRead" v-model="fileList" />
      </div>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <Bottom></Bottom>
  </div>

</template>
<script>
import Cookies from 'js-cookie'

import { upload, add, types } from '@/api/app'
import Bottom from '@/components/bottom'
export default {
  data() {
    return {
      user: this.$store.state.user,
      activeNames: ['1'],
      list: [],
      title: '',
      classname: '',
      subject: '',
      teacher: '',
      content: '',
      type: '',
      is_show: 1,
      fileList: [],
      types: [],
      departs: [],
      depart: '',
      classlist: [],
      classnames: '',
      content1: [{value1: ''}],
      content2: [{value2: ''}],
      id: 0

    }
  },
  components: {
    Bottom
  },
  computed: {},
  mounted() {},
  created() {
    this.getType()
    var timer = new Date()

    for (var i = 0; i<=2; i++ ) {
      this.classlist.push(timer.getFullYear()-i)
    }

    let string = localStorage.getItem('__add__')
    if(string) {
      let data = JSON.parse(string)
      console.log(data)
      for (let i in data) {
        // this.$set(this, i, data[i])
        if(i == 'fileList') {
          let arr = []
          for (let ii in data[i]) {
            if(data[i][ii]['status'] == 'done') {
              arr[ii] = data[i][ii]
            }
          }
          this.fileList = arr
        }else if(i == 'imgs'){
          let arr = []
          for (let ii in data[i]) {
            arr[ii] = {
              info: data[i][ii],
              url: data[i][ii]['thumbs']
            }
          }
          this.fileList = arr
        }else if(i == 'content1'){
          if(typeof data[i] != 'object') {
            this.content1 = [{value1: data[i]}]
          }else{
            this.content1 = data[i]
          }
        }else if(i == 'content2'){
          if(typeof data[i] != 'object') {
            this.content2 = [{value2: data[i]}]
          }else{
            this.content2 = data[i]
          }
          
        }else{
          this.$set(this, i, data[i])
        }
      }
      this.classname = parseInt(this.classname)
      this.depart = data.departid
console.log(typeof this.depart)

    }
  },

  methods: {
    onSubmit(e) {
      let ids = []
      if(!e.classname) {
        this.$toast('请选择年级')
        return false
      }
      if(!e.type) {
        this.$toast('请选择类型')
        return false
      }
      if(!e.depart) {
        this.$toast('请选择部门')
        return false
      }
      if(this.fileList.length == 0) {
        this.$toast('请上传图片')
        return false
      }
      if(this.content1.length <3) {
        this.$toast('待改进必须大于3条')
        return false
      }
      e.content1 = this.content1
      e.content2 = this.content2
      e.id = this.id

      for(let i in this.fileList) {
        if(this.fileList[i]['status'] == 'uploading') {
          continue;
        }
        ids.push(this.fileList[i]['info']['id'])
      }
      e.thumbs = ids
      if(ids.length ==0) {
        this.$toast('请上传图片')
        return false
      }
      e.attachment_id = ids[0]
      let _this = this
      e.is_show = 1
      add(e).then(res=> {
        this.$toast({
          message: res.message,
          onClose: function(){
            if(res.code == 1) {
              localStorage.removeItem('__add__');
              _this.JumpUrl()
            }else{
              this.$toast('上传失败，请稍后再试')
            }
          }
        })
      })
    },
    afterRead(file) {
      file.status = 'uploading';
      file.message = '上传中...';
      upload(file.file, this.$store.state.app.id).then(res=>{
        file.status = 'done'
        file.info = res

        this.saveCache()
        console.log(this.fileList)
      })
    },
    JumpUrl(row) {
      this.$router.push({name: 'Index'})
    },
    getType(){
      types().then(res=> {
        this.types = res.list
        this.departs = res.departs
      })
    },
    saveCache(){
      let data = {
        title: this.title,
        classname: this.classname,
        classnames: this.classnames,
        subject: this.subject,
        teacher: this.teacher,
        content: this.content,
        content1: this.content1,
        content2: this.content2,
        type: this.type,
        fileList: (this.fileList),
        depart: this.depart
      }
      localStorage.setItem('__add__', JSON.stringify(data))
      console.log(data)
    },
    addText(type){
      if(type == 1) {
        this.content1.push({value1: ''})
      }else{
        this.content2.push({value2: ''})
      }
      
    },
    reomveText(index, type){
      if(type == 1) {
        this.content1.splice(index,1);
      }else{
        this.content2.splice(index,1);
      }
    },
    clearCahce(){
      localStorage.removeItem('__add__')
      this.id = 0
      this.$router.go(0)
    }
  }
};
</script>